<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <meta name="keywords" content="jquery,ui,easy,easyui,web">  
    <meta name="description" content="easyui help you build your web page easily!">  
    <title>DataGrid Pagination - jQuery EasyUI Demo</title>  
    <link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.3.2/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.3.2/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../jquery-easyui-1.3.2/demo/demo.css">
	<script type="text/javascript" src="../../jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> 
</head>  
<body>  
    <h2>服务器段分页</h2>  
    <div class="demo-info" style="margin-bottom:10px">  
        <div class="demo-tip icon-tip">&nbsp;</div>  
        <div>点击分页条来改变页码或者每页大小.</div>  
    </div>  
    <p>  
        分页条位置 ：  
        <select onchange="changeP(this.value)">  
            <option>底部</option>  
            <option>顶部</option>  
            <option>都有</option>  
        </select>  
    </p>  
      
    <table id="tt" class="easyui-datagrid" style="width:700px;height:250px"  
            url="/JEasyUi-Java1234/servlet/serverPagination"  
            title="加载数据" iconCls="icon-save"  
            rownumbers="true" pagination="true">  
        <thead>  
            <tr>  
                <th field="itemid" width="80">编号</th>  
                <th field="productid" width="120">产品编号</th>  
                <th field="listprice" width="80" align="right">市场价</th>  
                <th field="unitcost" width="80" align="right">成本价</th>  
                <th field="attr1" width="200">描述</th>  
                <th field="status" width="60" align="center">状态</th>  
            </tr>  
        </thead>  
    </table>  
    <script type="text/javascript">  
        function changeP(pos){  
            $('#tt').datagrid('loadData',[]);  
            $('#tt').datagrid({pagePosition:pos});  
        }  
    </script>  
</body>  
</html>  
